<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

    <!-- 路径可能跟我不一样，需要修改 -->
    <script src="../js/vue.global.js"></script>

    <style>
        table {
            width: 600px;
            text-align: center;
            border-bottom: solid 2px #DDD;
            /* 合并边框 */
            border-collapse: collapse;
        }

        td,
        th {
            border-bottom: solid 1px #DDD;
            height: 40px;
        }
    </style>
</head>

<body>

    <div id="app">

        <h3>用户信息</h3>
        <table>
            <tr>
                <th>序号</th>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户性别</th>
                <th>用户年龄</th>
            </tr>
            <tbody id="userBox">
                <tr v-for="(user , index) in userList">
                    <td>{{index+1}}</td>
                    <td>{{user.userId}}</td>
                    <td>{{user.userName}}</td>
                    <td>{{user.userSex}}</td>
                    <td>{{user.userAge}}</td>

                </tr>
            </tbody>
        </table>

        <button @click="appendData">追加数组</button>



        <ul>

            <li v-for="(value,key) in person">{{key +'---'+value}}</li>



        </ul>
    </div>


    <script>


        Vue.createApp({
            data() {
                return {
                    person: {
                        name: '张三丰',
                        gender: '男性',
                        age: 18
                    },
                    userList: [{
                        userId: 100,
                        userName: '张三',
                        userSex: '男',
                        userAge: 20
                    }, {
                        userId: 200,
                        userName: '李四',
                        userSex: '女',
                        userAge: 21
                    }, {
                        userId: 300,
                        userName: '王五',
                        userSex: '男',
                        userAge: 22
                    }]
                }
            },
            methods: {
                appendData() {
                    this.userList.push({
                        userId: 4,
                        userName: '追加',
                        userSex: '男',
                        userAge: 22
                    })
                }
            }
        }).mount("#app")

    </script>




</body>

</html>